<script lang="ts" setup>
import request from '../utils/request';
import type { ChannelList } from '../types/data'
import { ref, watch } from 'vue';

const props = defineProps<{
  channelId: string
}>()

const channelList = ref<ChannelList>([])
const getChannelList = async (newChannelId: string) => {
  const r = await request<ChannelList>(`/channel/${newChannelId}`)
  channelList.value = r.data
}
watch(() => props.channelId, (newChannelId) => {
  newChannelId && getChannelList(newChannelId)
})
</script>

<template>
  <div className="list">
    <div className="article_item" v-for="channel in channelList" :key="channel.id">
      <h3 className="van-ellipsis">{{channel.username}}</h3>
      <div className="img_box">
        <img
          :src="channel.avatar"
          className="w100"
          alt=""
        />
      </div>
      <div className="info_box">
        <span>{{channel.email}}</span>
        <span>{{channel.password}}</span>
        <span>{{channel.birthdate}}</span>
      </div>
    </div>
  </div>
</template>
